<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript" src="../js/lib/jquery-1.7.1.min.js"></script>  
<script>
  $(document).ready(function(){
	  
	  <% int type = Integer.parseInt(request.getParameter("type"));  
	   if(type == 1){
		   %>
		   $("#t1").attr("checked", true);	
		   <%
	   }
	   if(type == 2){
		   %>
		   $("#t2").attr("checked", true);	
		   <%
	   }
	   if(type == 3){
		   %>
		   $("#t3").attr("checked", true);	
		   <%
	   }
	%>
  });
</script>
<input type = "hidden" id = "category" name = "category" value = "square">
<div id="content">
	<div class="wrapper top w-feedback">
		<h2>제안/신고</h2>
		<div class="write-box m-box">
			<form name="feedback" class="m-box-inner" action="/service/feedback/update.do" method="post">				
				<table>
				<tr>
					<th>문의유형</th>
					<td class="type">
						<label><input type="radio" value="1" name="type" id = "t1"  autoComplete="off" /> 장애/오류 신고</label>
						<label><input type="radio" value="2" name="type" id = "t2"  autoComplete="off" /> 서비스 제안</label>
						<label><input type="radio" value="3" name="type" id = "t3"  autoComplete="off" /> 이용 및 기타 문의</label>
					</td>
				</tr>
				<tr>
					<th>카테고리</th>
					<td class="category">
						<select name="categoryCode">
							<optgroup label="웹사이트">								
									<option value="1">여행광장</option>								
									<option value="2">여행지</option>								
									<option value="3">T노트</option>								
									<option value="4">여행길 만들기</option>								
							</optgroup>
							<optgroup label="어플리케이션">								
									<option value="5">트립히어</option>								
									<option value="6">떠나요! TV속 여행</option>								
									<option value="7">트래블로 전국맛집</option>								
							</optgroup>							
								<option value="8">기타문의</option>							
						</select>
					</td>
				</tr>
				<tr>
					<th>제목입력</th>
					<td><input name="title" class="text" type="text" maxLength="80" value="" /></td>
				</tr>
				<tr>
					<th>상세내용</th>
					<td class="contents"><textarea name="contents"></textarea></td>
				</tr>
				<tr>
					<th>사진첨부</th>
					<td>
						<div class="photo">
							<span class="btn-upload"><span></span></span><button class="upload">파일 선택</button>
							<span class="upload-info">5M 이내 (최대 3개까지 가능)</span>
							<ul class="attached">								
							</ul>
						</div>
					</td>
				</tr>
				<tr>
					<th>참고 URL</th>
					<td><input name="url" class="text empty" type="text" maxLength="100" placeholder="장애가 발생한 주소를 적어주시면 정확하고 빠른 진단에 도움이 됩니다." autoComplete="off" /></td>
				</tr>
				</table>
				<div class="submit">					
						<a href="/service/feedback" class="btn-cancel">취소</a>				
					<input type="submit" class="button big" value="등록" />
				</div>
			</form>
			<script>
			atto.require(['lib/swfupload.js'], function(){
				var categoryCode = '';
				var $form = $('form[name=feedback]');
				var $btnUploadHolder = $form.find('span.btn-upload>span');
				var $selCate = $form.find('select[name=categoryCode]');
				var $attached = $form.find('ul.attached');

				atto.input($form.find('input[name=url]'));
				$selCate.val(categoryCode);

				var swfUpload = new SWFUpload({
					upload_url : '/common/upload/feedback.json',
					button_placeholder : $btnUploadHolder[0],
					button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
					button_width : 72,
					button_height : 28,
					file_upload_limit : 3,
					file_queue_limit : 3,
					upload_start_handler : function(){
						atto.wait($form);
					},
					upload_error_handler : function(file, errorCode, message){
						if (errorCode==SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED) {
							alert('첨부파일은 최대 3개까지만 등록하실 수 있습니다.');
						}
					},
					upload_success_handler : function(file, serverData){
						var result = $.parseJSON(serverData);
						var count = $attached.find('li').length + 1;
						var $item = $('<li/>');
						var $link = $('<a/>').attr('href', result.url).attr('target', '_blank').text('첨부파일' + count);
						var $input = $('<input/>').attr('name', 'photo[]').attr('type', 'hidden').val(result.url);
						var $btnDel = $('<a/>').addClass('btn-del').attr('href', '#');				
						$item.append($link).append($input).append($btnDel);
						$attached.append($item);

						var stats = this.getStats();
						if (stats.files_queued > 0) {
							this.startUpload();
						} else {
							atto.wait($form, false);
						}
					}
				});
				$attached.delegate('a.btn-del', 'click', function(ev){
					ev.preventDefault();
					$(this).parent().remove();
				});
				$form.submit(function(ev){
					var form = this;
					if (!form.title.value) {
						ev.preventDefault();
						atto.require(['atto.ui.dialog'], function(){
							atto.ui.dialog.alert('제목을 입력해 주세요.');
						});
					} else if (!form.contents.value) {
						ev.preventDefault();	
						atto.require(['atto.ui.dialog'], function(){
							atto.ui.dialog.alert('상세 내용을 입력해 주세요');
						});
					} else if ($(form.url).hasClass('empty')) {
						form.url.value = '';
					}
				});
			});
			</script>
		</div>
		<p class="write-guide">
			작성하신 내용에 대한 답변은 게시판 리스트에서 댓글로 확인하실 수 있습니다.
		</p>
	</div>
</div>
